<template>

  <div style="padding: 20px;">
    <!--  页面的搜索表单 -->
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="分类">
          <el-cascader v-model="queryParams.cids" :props="props" placeholder="请选择分类" />
        </el-form-item>
        <el-form-item label="品牌">
          <el-select v-model="queryParams.brandId" placeholder="请选择品牌" style="width: 240px">
            <el-option
                v-for="item in brands"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="initPageData">搜索</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--  增删改按钮组 -->
    <div>
      <el-button type="primary" plain :icon="Plus" @click="handleShowSaveDialog">新增</el-button>
      <el-button type="success" plain :icon="Edit" >修改</el-button>
      <el-button type="danger" plain :icon="Delete" @click="handleBatchDel">批量删除</el-button>
    </div>
    <!--    分类品牌列表 -->
    <div>
      <el-table @selection-change="handleSelectChange" :data="list" stripe style="width: 100%;margin-top: 10px;">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="categoryName" label="分类名称" />
        <el-table-column prop="brandName" label="品牌名称" />
        <el-table-column prop="logo" label="品牌图标">
          <template #default="scope">
            <img :src="scope.row.logo" alt="" style="width: 40px;height: 40px;">
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleShowEditDialog(scope.row)">
              修改
            </el-button>
            <el-button link type="primary" size="small" @click="handleDelCategoryBrand(scope.row.categoryName+'_'+scope.row.brandName,scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页导航 -->
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="initPageData"
      />
    </div>

    <!--    新增/更新对话框 -->
    <div>
      <el-dialog v-model="saveDialogFormVisible" :title="title" width="500">
        <el-form>
          <el-form-item label="分类">
            <el-cascader v-model="categoryBrand.cids" :props="props" placeholder="请选择分类" />
          </el-form-item>
          <el-form-item label="品牌">
            <el-select v-model="categoryBrand.brandId" placeholder="请选择品牌" style="width: 240px">
              <el-option
                  v-for="item in brands"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="saveDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSaveOrUpdate">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>

</template>

<script setup>
import {Search, Refresh, Plus, Edit, Delete} from '@element-plus/icons-vue'
// 引入categoryBrand.js导出的所有内容    categoryBrandApi代表整个文件，调用函数时 需要通过categoryBrandApi.函数名()来调用
import  *  as  categoryBrandApi from '@/api/product/categoryBrand.js'
import  { listAllBrands } from '@/api/product/brand.js'
import {ElMessage, ElMessageBox} from "element-plus";
import { getToken } from '@/utils/auth'
import {listCatesByPid} from "@/api/product/category.js"; //用户登录token的工具
//1、查询页面数据：
// 页面初始化时发起异步请求加载品牌分页列表
onMounted(() => {
  initPageData()
})
//加载数据的函数：同步阻塞执行
const initPageData = async () => {
  //需要获取三级分类id 设置给queryParams的categoryId属性
  if(queryParams.value.cids && queryParams.value.cids.length ===3){
    //获取三级id绑定
    queryParams.value.categoryId = queryParams.value.cids[2]
    queryParams.value.cids = null
  }
  //  异步请求 ，从返回的对象中获取它的code  rows和total三个属性值
  const {rows, total: t} = await categoryBrandApi.listCategoryBrands(queryParams.value)
  //list接收查询到的分页列表
  list.value = rows; //使用响应式对象的value接收数据
  total.value = t;

  //查询所有品牌列表
  const {data} = await listAllBrands()
  brands.value = data


}
const brands = ref([])
//分页列表数据
const list = ref([])
const total = ref(100)
const queryParams = ref({
  pageNum: 1,
  pageSize: 3,
  brandId:null,
  cids:null
})
//重置按钮事件函数
const handleReset = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 3,
    searchValue: null
  }
  initPageData()
}
//2、删除品牌
const handleDelCategoryBrand = (name, ids) => {
  //弹出确认删除的提示
  ElMessageBox.confirm(
      `正在删除分类品牌 ${name},是否继续?`,
      '删除确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await categoryBrandApi.delCategoryBrands(ids)
        ElMessage.success("删除成功")
        //刷新页面数据
        initPageData();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}
//3、批量删除品牌
const handleBatchDel = () => {
  //1、判断是否选中了要删除的记录
  if (!selectRows.value || selectRows.value.length === 0) {
    ElMessage.warning('请选择要删除的行')
    return
  }
  //2、获取选中记录的id列表 拼接为 逗号分割的字符串
  let ids = selectRows.value.map(row => row.id).join(',')
  let names = selectRows.value.map(row => row.categoryName+"_"+row.brandName).join('、')
  // console.log(ids)
  //3、调用上面的函数删除
  handleDelCategoryBrand(names, ids)
}
//4、表格的行选中状态变化时的回调
const selectRows = ref([]) //接收选中要删除行的变量
const handleSelectChange = (newSelection) => {
  // console.log('表格选中行变化了：',newSelection)
  selectRows.value = newSelection;
}

//5、新增按钮事件函数： 弹出新增对话框
const handleShowSaveDialog = () => {
  title.value = '新增品牌'
  //解决缓存问题
  categoryBrand.value = {}
  saveDialogFormVisible.value = true
}
const saveDialogFormVisible = ref(false)
const formLabelWidth = ref('120px')
const categoryBrand = ref({}) //新增对话框接收新增数据的对象
const title = ref('新增分类品牌') //对话框标题

//6、对话框提交按钮事件函数： 提交品牌数据保存
const handleSave = async ()=>{
  if(categoryBrand.value.cids && categoryBrand.value.cids.length ===3){
    //获取三级id绑定
    categoryBrand.value.categoryId = categoryBrand.value.cids[2]
    categoryBrand.value.cids = null
  }
  await categoryBrandApi.saveCategoryBrands(categoryBrand.value)
  ElMessage.success('新增成功')
  initPageData()
  //关闭对话框
  saveDialogFormVisible.value = false
}
//7、修改按钮事件函数：  查询要修改的品牌信息 弹出对话框展示
const handleShowEditDialog = async (row)=>{
  //查询要修改的品牌
  title.value = '更新分类品牌'
  const {data} = await categoryBrandApi.getCategoryBrandsById(row.id)
  // debugger
  categoryBrand.value = data //使用新增修改对话框绑定的变量接收 查询到的品牌
  categoryBrand.value.cids = data.categoryIdList
  //弹出对话框
  saveDialogFormVisible.value = true
}
//8、提交修改请求
const handleUpdate = async  ()=>{

  if(categoryBrand.value.cids && categoryBrand.value.cids.length ===3){
    //获取三级id绑定
    categoryBrand.value.categoryId = categoryBrand.value.cids[2]
    categoryBrand.value.cids = null
  }
  await categoryBrandApi.updateCategoryBrands(categoryBrand.value)
  initPageData()
  ElMessage.success('更新成功')
  saveDialogFormVisible.value = false
}
//9、新增、更新对话框 提交按钮的事件函数
const handleSaveOrUpdate = ()=>{

  if(categoryBrand.value.id){
    //更新
    handleUpdate()
  }else{
    //新增
    handleSave()
  }
}
//10、级联选择器 选择分类列表的 配置
const props =  {
  lazy: true, //开启懒加载
  label: 'name', //指定查询到的分类对象的哪个属性当作标题展示
  leaf: 'leaf', //指定使用查询到的分类对象的 leaf属性来判断 节点是否为叶子节点， true表示叶子节点
  value:'id', //指定使用查询到分类对象的id属性 作为条件查询表单收集的数据
  lazyLoad: async (node, resolve) => { //表示懒加载的函数： 参数1 选择加载下级节点的节点 ， 参数2：解析对象
    // debugger //前端断点
    const { level , data:row} = node
    let pid = 0;
    if(level!=0){
      pid = row.id
    }
    const {data} = await listCatesByPid(pid)
    data.forEach( item=>{
      item.leaf = !item.hasChildren
    })
    resolve(data)
    // if(level===0){
    //   //页面初始化查询
    //   //1、页面初始化时 会进入到lazyLoad函数
    //   //第一次进入 加载第一级分类列表展示
    //   const {data} = await listCatesByPid(0)
    //   resolve(data)
    // }else{
    //   //2、在级联选择器中选择有下一级子菜单的 节点时会进入到lazyLoad函数
    //   //查询 点击节点的下一级
    //
    // }

  },
}
</script>

<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>